<template>
  <canvas ref="canvas" style="width: 500px"></canvas>
  <div>
    <input type="range" max="1" step="0.01" v-model="y">
  </div>
</template>

<script>
import * as PIXI from 'pixi.js'
import { Sprite2d, AFFINE } from 'pixi-projection'

export default {
  data() {
    return {
      y: .5,
      isoScalingContainer: null
    }
  },
  watch: {
    y (val) {
      console.log(val)
      this.isoScalingContainer.scale.y = val
    }
  },
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      const app = new PIXI.Application({
        view: this.$refs.canvas,
        width: 500,
        height: 500,
        antialias: true,
        resolution: window.devicePixelRatio,
        backgroundColor: 0x000000
      })
      this.isoScalingContainer = new PIXI.Container()
      this.isoScalingContainer.scale.y = this.y
      this.isoScalingContainer.position.set(250, 250)
      app.stage.addChild(this.isoScalingContainer)

      const isometryPlane = new PIXI.Graphics()
      isometryPlane.rotation = Math.PI / 4
      isometryPlane.lineStyle(2, 0xffffff)
      isometryPlane.drawCircle(0, 0, 200)
      this.isoScalingContainer.addChild(isometryPlane)

      // 绘制圆点
      const point = new PIXI.Graphics()
        .lineStyle(0)
        .beginFill(0xaa4f08)
        .drawCircle(250, 250, 50)
        .endFill()

      // 使用生成的圆点
      const texture = app.renderer.generateTexture(point)
      const sprite = new Sprite2d(texture)
      // 设置旋转中心
      sprite.anchor.set(0.5, 1)
      sprite.proj.affine = AFFINE.AXIS_X
      // sprite.scale.set(0.3, 1)
      isometryPlane.addChild(sprite)

      // 使用图片
      const imgTexture = PIXI.Texture.from('/image/eggHead.png')
      const imgSprite = new Sprite2d(imgTexture)
      imgSprite.anchor.set(0.5, 1)
      imgSprite.proj.affine = AFFINE.AXIS_X
      isometryPlane.addChild(imgSprite)

      let step = 0
      app.ticker.add((delta) => {
        step += delta
        sprite.rotation = step * 0.05
        imgSprite.rotation = step * 0.05

        const radius = 200
        const speed = 0.009
        sprite.position.set(
          Math.cos(step * speed) * radius, 
          Math.sin(step * speed) * radius
        )
        // imgSprite.position.set(
        //   Math.cos(step * speed) * radius, 
        //   Math.sin(step * speed) * radius
        // )
      })
    }
  }
}
</script>

<style>

</style>